<template>
    <div class="chart-box">
        <div class="title clearfix">
          {{$t('saleByAreaAnalysis.saleTotal')}}
          <el-radio-group v-model="dateType" @change="initSaleChart" size="mini" class="pull-right">
            <el-radio-button label="month">{{$t('index_js_days')}}</el-radio-button>
            <el-radio-button label="year">{{$t('overview.month')}}</el-radio-button>
            <el-radio-button label="all">{{$t('overview.year')}}</el-radio-button>
          </el-radio-group>
        </div>
        <div id="saleChart" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
import '@/utils/index.js'
let echarts = require('echarts/lib/echarts');
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            dateType:'month',
            dateUnit:{month:this.$t('index.unitTimeDay'),year:this.$t('index.unitTimeMonth'),all:this.$t('index.unitTimeYear')},
            currentTime:this.$options.filters['dateFormat'](new Date()),
            saleChart:{}
        }
    },
    computed:{

    },
    watch:{

    },
    created(){

    },
    mounted(){
        this.saleChart=echarts.init(document.getElementById("saleChart"))
        this.initSaleChart('month')
        window.addEventListener('resize',()=>{
            this.saleChart.resize()
        })
    },
    methods:{
        async initSaleChart(_dateType){
            this.dateType=_dateType;
            let res = await this.API.saleStatisticsByTime({
                timeType: this.dateType,
                currentTime: this.currentTime
            })
            let xAxisData=[],seriesData=[];
            if(res){
                res.forEach(item=>{
                if(this.dateType=='month'){
                    xAxisData.push(item.day);
                }else if(this.dateType=='year'){
                    xAxisData.push(item.month);
                }else if(this.dateType=='all'){
                    xAxisData.push(item.year);
                }
                
                seriesData.push(item.sum);
                })
            }
            
            let unit_time=this.dateUnit[this.dateType];
            let stand=this.$t('stand')
            let optionObj={
                tooltip:{
                formatter: function (params) {
                        return params[0]['axisValue']+'('+unit_time+') : '+params[0]['value']+stand
                    }
                },
                xAxis:{
                    data : xAxisData
                },
                yAxis:{
                    name:this.$t('stand')
                },
                grid :{
                    left : '20px',
                    top : '45px',
                    right : '20px',
                    bottom : '20px',
                    containLabel :true
                },
                series : [this.EchartsUtil.getSeries({type:'bar',data:seriesData})]
            };
            this.saleChart.setOption(this.EchartsUtil.getOption(optionObj));
        }
    }

}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.chart-box{
    background:@color_box_bg;
    border-radius: @border_radius;
    .title{
        padding: 10px;
        border-bottom: @border_bottom;
        color: @color_title;
    }
}
</style>